import React, { Component } from 'react';
import { connect } from 'react-redux';
import action from '../../../store/action';
import { Tabs, Button, Modal, Table, Tree } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import { tree_fun, new_map, new_tree, child_treeVal, second_Tree_fun, test } from '../../../store/function';

class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mode: 'top',
            visible: false,
            visible_send: false,
            modal_sta: false,
            data: [],
            num: '',
            list: '',
            div_state: false,
            tree_num: '',
            table_list: [],
            clomuns_list: []
        };
    }

    render() {
        const { DirectoryTree } = Tree;
        const { manage_content, manage_second_content } = this.props

        let columns = [];
        let modal_clo = [];
        const columns_second = [];
        let tree_clomus = [];
        let second_tree = [];
        if (this.props.dataManagement_save.length != 0) {
            const new_val = []
            this.props.dataManagement_save.map((item, index) => {
                item.properties.map((i, key) => {
                    return i.json_value.tableDataList != undefined ? new_val.push(i.json_value.tableDataList[0]) : null

                })
            })
            tree_clomus = this.props.dataManagement_save.filter((new_item, index) => {
                return new_item.childCategory.length != 0
            })
            tree_clomus = tree_clomus.map((item, index) => {
                return [item]
            })
            tree_clomus = tree_clomus.filter((item, index) => {
                return item[0].order == this.state.num
            })
            if (tree_clomus.length == 1) new_tree(tree_clomus[0]);
            tree_clomus = tree_clomus.length == 1 ? new_tree(tree_clomus[0]) : []

        }
        if (this.props.dataManagement_B_see.length != 0) {

            second_tree = this.props.dataManagement_B_see.filter((new_item, index) => {
                return new_item.ChildCategory.length != 0
            })

            second_tree = second_tree.map((item, index) => {
                return [item]
            })

            second_tree = second_tree.filter((item, index) => {
                return item[0].Order == this.state.tree_num
            })
            second_tree = second_tree.length == 1 ? second_Tree_fun(second_tree[0]) : []

        }

        const onSelect = (keys, event) => {
            return event.node.properties.length >= 1 ? child_treeVal(event.node.properties, manage_content) : console.log();
        }
        const second_onSelect = (key, event) => {


            return event.node.Properties.length >= 1 ? child_treeVal(event.node.ChildCategory.length > 0 ? event.node.ChildCategory : event.node.Properties, manage_second_content) : console.log();

        }
        const { TabPane } = Tabs;
        const { mode } = this.state;
        const new_data = this.props.dataManagement_B[0];
        const callback = (key) => {
            this.setState({
                num: this.props.dataManagement_save[key].order
            })
            child_treeVal([], manage_content)
        }
        const tree_order = (e) => {

            this.setState({
                tree_num: this.props.dataManagement_B_see[e].Order
            })

            child_treeVal([], manage_second_content)

        }
        return <div style={{ padding: 10, height: '100%' }}>
            <div style={{ height: '100%' }}>

                <Tabs defaultActiveKey="0" tabPosition={mode} style={{ height: '100%' }} onTabClick={callback}>
                    {this.props.dataManagement_save.map((i, index) => (
                        <TabPane tab={i.categoryName} key={index} >
                            {

                                i.properties.length > 1 ? (<div className='json_Tab'>
                                    {i.properties.map((item, index) => {
                                        return <div key={index}>
                                            <span>{item.json_value.tipsName}:</span>
                                            {
                                                item.json_value.input_value != '' && item.json_value.input_value != undefined && item.json_value.input_value != null ? (
                                                    item.json_value.input_value.indexOf('.jpg') > 0 || item.json_value.input_value.indexOf('.png') > 0 ? (
                                                        <img src={item.json_value.input_value} />
                                                    ) : (
                                                            item.json_value.input_value.indexOf('.pdf') > 0 || item.json_value.input_value.indexOf('.html') > 0 ? (
                                                                <a href={item.json_value.input_value}>{item.json_value.input_value}</a>
                                                            ) : (
                                                                    <a style={{ marginLeft: 5 }}>{item.json_value.input_value == "" ? '暂无数据' : item.json_value.input_value}</a>
                                                                )
                                                        )
                                                ) : (

                                                        <div>
                                                            {
                                                                item.json_value.tableDataList != undefined && item.json_value.tableDataList.length > 0 ? (
                                                                    columns = test(item.json_value.tableDataList).columns,
                                                                    columns.push({
                                                                        title: '操作',
                                                                        key: 'action',
                                                                        width: 60,
                                                                        render: (text, record, index) => {
                                                                            return <Button type="link" danger style={{ padding: "0" }} onClick={() => {

                                                                                this.setState({
                                                                                    visible_send: true,
                                                                                    table_list: Object.values(text),
                                                                                    clomuns_list: columns
                                                                                })
                                                                            }}>
                                                                                详细
                                                                              </Button>
                                                                        }
                                                                    }),
                                                                    <Table columns={columns} dataSource={test(item.json_value.tableDataList).dataSources} bordered rowKey={(text, record) => record} scroll={{ x: 1000, y: 700 }} key={index} size="small"/>
                                                                ) : (<a>{'暂无数据'}</a>)
                                                            }

                                                        </div>






                                                    )
                                            }

                                            {item.json_value.associatedData != null ?
                                                <Button type='link' title='查看详情' onClick={() => this.handClick(item.json_value.associatedData)}>查看</Button>
                                                : null
                                            }
                                        </div>
                                    })}

                                </div>) : (
                                        i.childCategory.length == 0 ? (<div className=''>
                                            {i.properties.map((j, index) => {
                                                columns = test(j.json_value.tableDataList).columns;
                                                columns.push({
                                                    title: '操作',
                                                    key: 'action',
                                                    width: 60,
                                                    render: (text, record, index) => {
                                                        return <Button type="link" danger style={{ padding: "0" }} onClick={() => {

                                                            this.setState({
                                                                visible_send: true,
                                                                table_list: Object.values(text),
                                                                clomuns_list: columns
                                                            })
                                                        }}>
                                                            详细
                                                                      </Button>
                                                    }
                                                })
                                                return <Table columns={columns} dataSource={test(j.json_value.tableDataList).dataSources} bordered rowKey={(text, record) => record} scroll={{ x: 1200, y: 700 }} key={index} size="small" />
                                            })}
                                        </div>) : (
                                                <div className='direTree_div'>
                                                    <DirectoryTree
                                                        multiple
                                                        defaultExpandAll={true}
                                                        expandAction={true}
                                                        onSelect={onSelect}
                                                        treeData={tree_clomus}
                                                        style={{ maxHeight: 767, width: 200 }}
                                                    />
                                                    <div className="right_div">
                                                        {
                                                            this.props.content.length != 0 ? (
                                                                this.props.content.length > 1 ? (
                                                                    <div className='child_right'>
                                                                        {
                                                                            this.props.content.map((item, index) => {
                                                                                return <div key={index}>
                                                                                    <span>{item.json_value.tipsName}:</span>
                                                                                    {
                                                                                        item.json_value.input_value != '' && item.json_value.input_value != undefined ? (
                                                                                            item.json_value.input_value.indexOf('.jpg') > 0 || item.json_value.input_value.indexOf('.png') > 0 ? (
                                                                                                <img src={item.json_value.input_value} />
                                                                                            ) : (
                                                                                                    item.json_value.input_value.indexOf('.pdf') > 0 || item.json_value.input_value.indexOf('.html') > 0 ? (
                                                                                                        <a href={item.json_value.input_value} title={item.json_value.input_value}>{item.json_value.input_value}</a>
                                                                                                    ) : (
                                                                                                            <a>{item.json_value.input_value}</a>
                                                                                                        )

                                                                                                )
                                                                                        ) : <a>{'暂无数据'}</a>

                                                                                    }
                                                                                </div>
                                                                            })
                                                                        }
                                                                    </div>


                                                                ) : (
                                                                        this.props.content_clo[this.props.content_clo.length - 1].title !== '操作' ? this.props.content_clo.push({
                                                                            title: '操作',
                                                                            key: 'action',
                                                                            width: 60,
                                                                            render: (text, record, index) => {
                                                                                return <Button type="link" danger style={{ padding: "0" }} onClick={() => {

                                                                                    this.setState({
                                                                                        visible_send: true,
                                                                                        table_list: Object.values(text),
                                                                                        clomuns_list: this.props.content_clo
                                                                                    })
                                                                                }}>
                                                                                    详细
                                                                                          </Button>
                                                                            }
                                                                        }) : this.props.content_clo,
                                                                        <Table columns={this.props.content_clo} dataSource={this.props.content} bordered rowKey={(text, record) => record} scroll={{ x: 1200, y: 700 }} key={index} size="small" />
                                                                    )

                                                            ) : console.log()

                                                        }

                                                    </div>
                                                </div>
                                            )

                                    )
                            }
                        </TabPane>
                    ))}
                </Tabs>
            </div>
            <Modal
                title="查看详情"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                cancelText='取消'
                okText='确认'
            >
                {

                    this.state.modal_sta == false ? (<Tabs defaultActiveKey="0" tabPosition={mode} onTabClick={tree_order}>
                        {
                            this.props.dataManagement_B.length === 1 ? (
                                <TabPane tab='标准'>
                                    <div className='Modal_div'>
                                        <div>
                                            <span>标准名称:</span>
                                            <a style={{ marginLeft: 10 }}>{new_data.new_list.Name}</a>
                                        </div>
                                        <div>
                                            <span>标准始应范围:</span>
                                            <a style={{ marginLeft: 10 }}>{new_data.new_list.Property}</a>
                                        </div>
                                        <div>
                                            <span>标准文件:</span>
                                            {
                                                new_data.new_list.Temperature.indexOf('.pdf') > 0 || new_data.new_list.Temperature.indexOf('.html') > 0 ? (
                                                    <a style={{ marginLeft: 10 }} href={new_data.new_list.Temperature}>{new_data.new_list.Temperature}</a>
                                                ) : (
                                                        <a style={{ marginLeft: 10 }}>{new_data.new_list.Temperature}</a>
                                                    )
                                            }

                                        </div>
                                    </div>
                                </TabPane>
                            ) : (
                                    this.props.dataManagement_B_see.map((i, index) => (
                                        <TabPane tab={i.CategoryName} key={index}>
                                            <div className='New_json_Tab'>
                                                {
                                                    i.ChildCategory.length != 0 ? (
                                                        <div className='direTree_div'>
                                                            <DirectoryTree
                                                                multiple
                                                                defaultExpandAll={true}
                                                                expandAction={true}
                                                                onSelect={second_onSelect}
                                                                treeData={second_tree}
                                                                style={{ maxHeight: 767, width: 200 }}
                                                            />
                                                            <div className="right_div">
                                                                {
                                                                    this.props.secondContent.length != 0 ? (
                                                                        this.props.secondContent.length > 1 ? (
                                                                            <div key={index} className="child_right" >
                                                                                {this.props.secondContent.map((item, index) => {
                                                                                    return <div key={index}  >
                                                                                        <span>{item.Json_value.TipsName}:</span>
                                                                                        {
                                                                                            item.Json_value.Input_value.indexOf('.jpg') > 0 || item.Json_value.Input_value.indexOf('.png') > 0 ? (
                                                                                                <img src={item.Json_value.Input_value} />
                                                                                            ) : (
                                                                                                    <a>{item.Json_value.Input_value}</a>
                                                                                                )
                                                                                        }
                                                                                    </div>
                                                                                })}
                                                                            </div>

                                                                        ) : (
                                                                                this.props.content_data[this.props.content_data.length - 1].title !== '操作' ? this.props.content_data.push({
                                                                                    title: '操作',
                                                                                    key: 'action',
                                                                                    width: 60,
                                                                                    render: (text, record, index) => {
                                                                                        return <Button type="link" danger style={{ padding: "0" }} onClick={() => {
                                                                                            this.setState({
                                                                                                visible_send: true,
                                                                                                table_list: Object.values(text),
                                                                                                clomuns_list: this.props.content_data
                                                                                            })
                                                                                        }}>
                                                                                            详细
                                                                                          </Button>
                                                                                    }
                                                                                }) : this.props.content_data,
                                                                                <Table columns={this.props.content_data} dataSource={this.props.secondContent} bordered rowKey={(text, record) => record} scroll={{ x: 1200, y: 700 }} key={index} size="small" />
                                                                            )

                                                                    ) : console.log()

                                                                }
                                                            </div>
                                                        </div>
                                                    ) : (<div className='right_div'>
                                                        {
                                                            i.Properties[0].Json_value.TableDataList != undefined ? (
                                                                <div>
                                                                    {i.Properties.map((item, index) => {
                                                                        modal_clo = test(item.Json_value.TableDataList).columns;
                                                                        modal_clo.push({
                                                                            title: '操作',
                                                                            key: 'action',
                                                                            width: 60,
                                                                            render: (text, record, index) => {
                                                                                return <Button type="link" danger style={{ padding: "0" }} onClick={() => {
                                                                                    this.setState({
                                                                                        visible_send: true,
                                                                                        table_list: Object.values(text),
                                                                                        clomuns_list: modal_clo
                                                                                    })
                                                                                }}>
                                                                                    详细
                                                                                              </Button>
                                                                            }
                                                                        })
                                                                        return <div style={{ width: '100%' }} key={index}>
                                                                            <span>{item.Json_value.TipsName}:</span>
                                                                            <Table columns={modal_clo} dataSource={test(item.Json_value.TableDataList).dataSources} bordered rowKey={(text, record) => record} scroll={{ x: 1200, y: 700 }} size="small" />
                                                                        </div>
                                                                    })}
                                                                </div>
                                                            ) : (
                                                                    <div className="child_right">
                                                                        {i.Properties.map((item, index) => {
                                                                            return <div key={index} >
                                                                                <span>{item.Json_value.TipsName}:</span>
                                                                                <a style={{ marginLeft: 10 }}>{item.Json_value.Input_value == undefined ? '无' : item.Json_value.Input_value}</a>
                                                                            </div>
                                                                        })}
                                                                    </div>
                                                                )
                                                        }
                                                    </div>
                                                        )
                                                }
                                            </div>
                                        </TabPane>
                                    ))
                                )
                        }
                    </Tabs>) : (
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                {columns_second.map((item, index) => {
                                    return index < columns_second.length - 1 ? (<div key={index} >
                                        <span>{item.title}:</span>
                                        <span>{this.state.list.input_value}</span>
                                    </div>) : null
                                })}
                            </div>
                        )
                }
            </Modal>
            <Modal
                title="详情"
                visible={this.state.visible_send}
                onOk={this.handle_Ok}
                onCancel={this.handle_Cancel}
                cancelText='取消'
                okText='确认'
            >
                <div className="modal_div">
                    {
                        this.state.clomuns_list.map((item, index) => {
                            if (index < this.state.clomuns_list.length - 1) {

                                return <div key={index} >
                                    <span>{item.title}:</span>
                                    {

                                        this.state.table_list[index] != '' && this.state.table_list[index] != undefined ? (
                                            this.state.table_list[index].indexOf('.jpg') > 0 || this.state.table_list[index].indexOf('.png') > 0 ? (
                                                <img src={this.state.table_list[index]} />
                                            ) : (
                                                    this.state.table_list[index].indexOf('.pdf') > 0 || this.state.table_list[index].indexOf('.html') > 0 ? (
                                                        <a href={this.state.table_list[index]}>{this.state.table_list[index]}</a>
                                                    ) : (
                                                            <a>
                                                                {this.state.table_list[index]}
                                                            </a>)

                                                )
                                        ) : '暂无数据'

                                    }
                                </div>
                            }
                        })
                    }
                </div>
            </Modal>
        </div >
    }
    handle_Ok = () => {
        this.setState({
            visible_send: false
        })
    }
    handle_Cancel = () => {
        this.setState({
            visible_send: false
        })
    }
    handel_modal = (e) => {
        this.setState({
            visible: true,
            list: e,
            modal_sta: true
        })
    }
    handClick = (e) => {
        const { manage_see } = this.props;
        let list = JSON.parse(e);
        this.setState({
            visible: true,
        });
        if (list.Name != undefined) {
            manage_see({
                new_list: list,
                state: false
            })
        } else {
            manage_see({
                new_list: tree_fun([list]),
                state: true
            })
        }
    }
    handel_showPhoto = (e) => {
    }
    handleOk = e => {
        this.setState({
            visible: false,
            modal_sta: false
        });
    };
    handleCancel = e => {
        this.setState({
            visible: false,
            modal_sta: false
        });
    };
}

export default connect(state => ({ ...state.custom }), action.custom)(index);